{% extends 'layout.html' %}getFormData(form)
{% block content %}
<script>
  const env = '{{ env }}'
  window.env = env
  const _fetch = window.fetch
  window.fetch = function(url, options = {}) {
    options.headers = { ...options.headers, env }
    return _fetch(url, options)
  }
</script>
<div class="container">
  <h2>{{ title }}</h2>
  <details v-for="form in forms">
    <summary v-html="form.summary"></summary>
    <div class="form" :ref="form.name">
      <div class="form-item">
        <label>Project</label>
        <input class="input" type="text" v-model="getFormData(form).project" />
      </div>
      <div class="form-item" v-if="form.modules">
        <label>Module</label>
        <select class="input" v-model="getFormData(form).module">
          <option value="">Not selected</option>
          <option v-for="module in form.modules" v-text="module" :value="module"></option>
        </select>
      </div>
      <div class="form-item">
        <label>Build</label>
        <input class="input" type="text" v-model="getFormData(form).build" />
      </div>
      <div class="form-item">
        <label class="required">File(s)</label>
        <input class="input" type="text" v-model="getFormData(form).filePath" />
      </div>
      <div class="form-item">
        <label class="required">Upload To</label>
        <input class="input" type="text" v-model="getFormData(form).uploadTo" />
      </div>
      <div class="form-item">
        <label>SSH</label>
        <select class="input" v-model="getFormData(form).ssh">
          <option value="">Not selected</option>
          <option v-for="ssh in sshs || []" v-text="ssh" :value="ssh"></option>
        </select>
      </div>
      <div class="form-item">
        <label>Shell</label>
        <textarea class="input shell" ref="shell" v-model="getFormData(form).shell" @input="resize($event)"></textarea>
      </div>
      <div class="form-item" v-if="getFormRef(form).hasResult">
        <label>Console</label>
        <pre class="console" v-text="getFormRef(form).log"></pre>
      </div>
      <div class="form-item">
        <button class="block" 
          v-if="!getFormRef(form).running" 
          @click="run(getFormRef(form), getFormData(form))"
          >
          <span>Run</span>
        </button>
        <button class="block cancel"
          v-else
          @click="cancel(getFormRef(form).ctxId)"
          >
          <span>Cancel</span>
        </button>
      </div>
    </div>
  </details>
</div>
<script src="/js/index.js"></script>
{% endblock %}
